.ProductFormSteps {
  margin-bottom: 24px;
  display: flex;

  .ProductFormStepItem {
    flex: 1;
    padding: 0 8px;
    cursor: pointer;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }

    .ProductFormStep {
      background-color: var(--mall-store-background-color);
      height: 48px;
      line-height: 48px;
      font-size: 14px;
      text-align: center;
      position: relative;
      user-select: none;
    }

    &:not(:first-child) {
      .ProductFormStep {
        &:before {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 24px solid var(--mall-store-background-color);
          border-bottom: 24px solid var(--mall-store-background-color);
          border-left: 12px solid transparent;
          position: absolute;
          top: 50%;
          margin-top: -24px;
          left: -12px;
        }
      }
    }

    &:not(:last-child) {
      .ProductFormStep {
        &:after {
          content: " ";
          display: block;
          width: 0;
          height: 0;
          border-top: 24px solid transparent;
          border-bottom: 24px solid transparent;
          border-left: 12px solid var(--mall-store-background-color);
          position: absolute;
          top: 50%;
          margin-top: -24px;
          right: -12px;
        }
      }
    }
  }

  .ProductFormStepItemFinished {
    .ProductFormStep {
      color: #fff;
      background-color: var(--mall-store-primary-color);
    }

    &:not(:first-child) {
      .ProductFormStep {
        &:before {
          border-top: 24px solid var(--mall-store-primary-color);
          border-bottom: 24px solid var(--mall-store-primary-color);
        }
      }
    }

    &:not(:last-child) {
      .ProductFormStep {
        &:after {
          border-left: 12px solid var(--mall-store-primary-color);
        }
      }
    }

  }
}
